<template>
<div class="cart">
  <van-nav-bar title="购物车" right-text="编辑">
  </van-nav-bar>
  <van-panel class="cart-pro">
    <div slot="header" class="header">
      <van-icon name="shop" /> {{car_pro_list[0].shopName}}
    </div>
    <van-cell-swipe :right-width="65" :left-width="0" :on-close="onClose" v-for="p in car_pro_list[0].cartItems">
      <van-card :title="p.prodName" :thumb="'http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/'+p.pic" :num="p.basketCount" :price="p.cash">
        <!-- <div slot="footer">
          <van-stepper v-model="p.basketCount" :min="1" :max="40" :step="1" :default-value="1" @plus="plus(p.basketCount)" @minus="minus(p.basketCount)" />
        </div> -->
      </van-card>
      <span slot="right" class="delete">删除</span>
    </van-cell-swipe>
  </van-panel>
  <van-submit-bar :price="3050" button-text="提交订单" @submit="$router.push({path:'/orderPay'})" />
  <!-- <div class="van-submit-bar">
    <div class="van-submit-bar__bar">
      <div class="van-submit-bar__price">
        <span class="van-submit-bar__price-text">合计：</span>
        <span class="van-submit-bar__price-interger">¥30.</span>
        <span class="van-submit-bar__price-decimal">50</span>
      </div>
      <button class="van-button van-button--danger van-button--normal" @click="$router.push({path:'/orderPay'})">
            <span class="van-button__text">提交订单</span>
          </button>
    </div>
  </div> -->
  <!-- 没有商品 -->
  <div class="empt" v-show="isEmpt">
    <img src='../assets/images/cart/empt.jpg' />
    <span>购物车肚子空空</span>
    <van-button size="small" @click="$router.push({path: '/home'})">去逛逛</van-button>
  </div>
</div>
</template>
<script>
import {
  mapGetters,
  mapActions
} from 'vuex'
export default {
  data() {
    return {
      isEmpt: false,
      checked: false,
      value: 1,
      // imageURL: 'http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/wlsq/shop/goods_img/20170427165224606877.jpg?x-oss-process=image/resize,m_fixed,h_90,w_90,limit_0'
    }
  },
  computed: {
    ...mapGetters([
      'car_pro_list'
    ])
  },
  created() {
    this.getCartProList()
  },
  methods: {
    ...mapActions([
      'getCartProList'
    ]),
    onSubmit() {
      this.$router.push({
        path: '/orderPay'
      })
    },
    plus() {
      console.log(this.value++);
    },
    minus() {
      console.log(this.value++);
    },
    onClose(clickPosition, instance) {
      switch (clickPosition) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close();
          break;
        case 'right':
          this.$dialog.confirm({
            message: '确定删除该商品吗？'
          }).then(() => {
            instance.close();
            this.$toast.success('删除成功!');
          });
          break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../assets/styles/common.scss';
.cart {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #f2f2f2;
    overflow-y: auto;
    margin-bottom: px2rem(180px);
    &-pro {
        margin-top: px2rem(10px);
        .header {
            display: flex;
            flex-direction: row;
            -webkit-align-items: center;
            align-content: center;
        }
        .van-icon {
            @include font-dpr(16px);
            color: #f44;
        }

    }
    .empt {
        margin: auto;
        text-align: center;
        vertical-align: middle;
        img {
            margin: auto;
            width: px2rem(80px);
            height: auto;
        }
    }
    .delete {
        display: block;
        height: 100%;
        width: 65px;
        text-align: center;
        line-height: 100px;
        background-color: #f44;
        color: #fff;
        vertical-align: middle;
    }
    .van-submit-bar {
        bottom: 50px;
    }
    .van-checkbox__label {
        margin-left: px2rem(10px);
    }
    .van-card__desc {
        margin-top: px2rem(20px);
        color: #f44;
        font-size: px2rem(30px);
    }
}
</style>
